<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="content">直播详情</block>
		</cu-custom>
		<view class="bg-white padding-lr padding-tb-sm  flex justify-end">
			<view class="text-center margin-left">
				<view class="iconfont icon-weixin1 default"></view>
				<view>公众号</view>
			</view>
			<view class="text-center margin-left-xl" @tap="goPage('/pages/shop/index')">
				<view class="iconfont icon-shouye1 default"></view>
				<view>首页</view>
			</view>
			<view class="text-center margin-left-xl" @tap="goPage('/pages/member/index')">
				<view class="iconfont icon-wode1 default"></view>
				<view>我的</view>
			</view>
		</view>
		<view class="bg-white " v-if="detail">
			<view class="thumb align-center">
				<image :src="detail.thumb" mode="widthFix" class="w100"></image>
			</view>
			<view class="text-lg text-bold margin-top-sm padding-lr">
				{{detail.name}}
			</view>
			<view class="margin-top-sm padding-bottom space-between padding-lr">
				<!-- <view class="text-black">主讲人：{{detail.lecturer_name}}</view> -->
				<view>
					<text v-if="detail.stream_status == 1" class="text-red">直播中</text>
					<text v-else-if="detail.type == 2" class="text-gray">{{detail.created_at}}</text>
					<text v-else class="text-red">{{detail.start_time}}开始</text>
				</view>
				<view class="text-orange">
					{{detail.interval}}积分
				</view>
			</view>
		</view>
		<view class="bg-white margin-top">
			<view class="cu-bar padding-lr">
				<view class="m-title text-bold">竞拍商品</view>
			</view>
			<view v-if="detail">
				<block v-for="(item,index) in detail.product" :key="index">
					<view class="space-between padding-lr padding-tb-sm solid-bottom">
						<view class="cu-avatar xl bg-white">
							<image :src="item.product.picture" mode="aspectFill"></image>
						</view>
						<view class="w100 margin-left-sm">
							<view class="text-black text-overflow-2 title">
								{{item.product.name}}
							</view>
							<view class="text-gray">
								起拍价：{{item.min_interval}}积分
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<!-- #ifdef H5 -->
		<ShareView ref="ShareView"></ShareView>
		<!-- #endif -->
		<Foot value=""></Foot>
		<view class="cu-bar foot tabbar">
			<button class="submit bg-orange text-white no-border" @tap="showShare" open-type="share">分享</button>
			<button class="submit bg-blue " v-if="detail && detail.pay == 1" @tap="goDetail">进入</button>
			<button class="submit bg-blue " v-else @tap="subscribe">支付积分</button>
		</view>
	</view>
</template>

<script>
	import ShareView from '@/components/default/ShareView.vue'
	import Foot from '@/components/default/foot.vue'
	export default {
		components: {
			ShareView,
			Foot,
		},
		data() {
			return {
				id: 0,
				detail: null,
				member: null,
				modalName: '',
				share_id: 0,
				CLOUDPATH: this.$config.cloudPath
			}
		},
		onLoad(options) {
			this.id = options.id
			if (options.share_id) this.share_id = options.share_id
			if (!this.id) {
				this.$common.showError('参数有误', function() {
					uni.navigateBack({})
				})
				return
			}
			if (this.$common.loginAuth(true)) {
				this.getDetail()
			}
		},
		onShow() {},
		methods: {
			getDetail() {
				this.$http
					.get('marketing_auction_view', {
						id: this.id,
						share_id: this.share_id
					})
					.then((response) => {
						let detail = response.data.data
						detail.created_at = this.$common.timeFormat(detail.created_at, 'YYYY-MM-DD')
						detail.start_time = this.$common.timeFormat(detail.start_time)
						this.detail = detail
						console.log(this.detail)
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
						uni.stopPullDownRefresh()
					})
			},
			subscribe() {
				if(this.$common.loginAuth(true)){
					this.$common.getMember().then((member)=>{
						if(member.account.user_integral - this.detail.interval >= 0){
							uni.showLoading({
								title: '加载中...'
							})
							this.$http
								.post('marketing_auction_pay_create', {
									id: this.id,
								})
								.then((response) => {
									this.detail.pay = 1
									this.$common.showSuccess('支付成功')
									uni.hideLoading()
								})
								.catch((response) => {
									console.log(response)
									uni.hideLoading()
								})
						} else{
							uni.showModal({
								title:'系统提示',
								content:'积分不够' + this.detail.interval + ',剩余' + member.account.user_integral + '，请充值后在操作',
								confirmText:'去充值',
								success: (res) => {
									if(res.confirm){
										uni.navigateTo({
											url:'/pages/member/interval/recharge'
										})
									}
								}
							})
						}
					})
				}
			},
			goDetail() {
				// #ifdef H5
				uni.navigateTo({
					url: "/pages/shop/marketing/auction/detail?id=" + this.id
				})
				// #endif 
				
				// #ifdef MP-WEIXIN
				let url = this.$config.H5Path + "/pages/shop/marketing/auction/detail?id=" + this.id + "&token=" + uni.getStorageSync('token')+"&isapp=1&version=3"
				this.$common.setCache('webview_url', url,10*60)
				uni.navigateTo({
					url: "/pages/site/webview"
				})
				// #endif 
				
				// #ifdef APP-VUE
				let url = getApp().$config.H5Path + "/pages/shop/marketing/auction/detail?id=" + this.id + "&token=" + uni.getStorageSync('token')+"&isapp=1&version=3"
				console.log(url)
				this.$common.setCache('webview_url', url,10*60)
				uni.navigateTo({
					url: "/pages/site/webview"
				})
				// #endif 
			},
			showShare() {
				if (this.detail) {
					this.$common.getMember().then((member)=>{
						this.$refs.ShareView.show({
							type: 'auction',
							id: this.detail.id,
							thumb: this.detail.thumb,
							name: this.detail.name,
							share_url: this.detail.share_url,
							member_id: member.id,
							member_name: member.nickname,
							member_head: member.head_portrait,
							reget: true
						})
					})
				}
			},
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/collegePackages/pages/college/live?id=' + this.id
			if (this.member) path += "&share_id=" + this.member.id
			return {
				title: this.detail.title,
				imageUrl: this.detail.thumb,
				path: path
			}
		},
	}
</script>

<style>
	.thumb {
		max-height: 400rpx;
		overflow: hidden;
		display: flex;
	}

	.yesicon {
		width: 120rpx;
		height: 120rpx;
	}

	.submit {
		border-radius: 0;
		font-size: 30rpx;
	}

	.submit::after {
		display: none;
	}
	.title{
		height: 80rpx;
		line-height: 40rpx;
	}
</style>
